<script setup lang="ts">
import { reactive, ref, toRaw } from "vue";
import { onLoad } from "@dcloudio/uni-app";
import { add_api, del_api, info_api } from "@/package/my/api/member_address";
import { EV_ADDRESS } from "@/constant/event";
import { Router } from "@/utils/router";
import { Toast } from "@/utils/toast";

import EditAreaPicker from "./components/edit-area-picker.vue";
import FormButton from "@/components/form/button.vue";
import PopupModal from "@/components/popup/modal.vue";

onLoad((options) => {
  if (options?.id) {
    info_api({ id: options?.id }).then((resp) => {
      editForm.id = resp.id;
      editForm.name = resp.name;
      editForm.phone = resp.phone;
      editForm.province_city = resp.province_city;
      editForm.address = resp.address;
      editForm.is_default = resp.is_default;
    });
  }
});

const editForm = reactive({
  id: "",
  name: "",
  phone: "",
  province_city: "",
  address: "",
  is_default: 0,
});

const areaClick = () => {
  editAreaPicker.value?.show((area) => {
    editForm.province_city = area;
  });
};

const saveClick = () => {
  Toast.showLoading();
  add_api({ ...toRaw(editForm) })
    .then(() => {
      Toast.hideLoading();
      uni.$emit(EV_ADDRESS, { type: "edit" });
      Router.navigateBack();
    })
    .catch(() => Toast.hideLoading());
};

const delClick = () => {
  popupModal.value?.show({ content: "是否确定删除该信息？" }, () => {
    Toast.showLoading();
    del_api({ id: editForm.id })
      .then(() => {
        Toast.hideLoading();
        Toast.show("删除成功");
        uni.$emit(EV_ADDRESS, { type: "del" });
        Router.navigateBack();
      })
      .catch(() => Toast.hideLoading());
  });
};

const editAreaPicker = ref<InstanceType<typeof EditAreaPicker>>();
const popupModal = ref<InstanceType<typeof PopupModal>>();
</script>

<template>
  <view class="edit-form">
    <uni-forms :modelValue="editForm" border label-width="80px">
      <uni-forms-item label="姓名" name="name" required>
        <input
          class="edit-form-input"
          v-model="editForm.name"
          placeholder="请输入姓名"
          placeholder-style="color: #999999"
        />
      </uni-forms-item>
      <uni-forms-item label="手机号码" name="phone" required>
        <input
          class="edit-form-input"
          v-model="editForm.phone"
          type="number"
          :maxlength="11"
          placeholder="请输入手机号码"
          placeholder-style="color: #999999"
        />
      </uni-forms-item>
      <uni-forms-item label="所在地区" name="province_city" required>
        <view class="edit-form-item" @click="areaClick">
          <input
            class="edit-form-input"
            v-model="editForm.province_city"
            disabled
            placeholder="省市区县，乡镇等"
            placeholder-style="color: #999999"
          />
          <image
            class="edit-form-arrow"
            src="@/package/my/static/address-arrow.png"
          />
        </view>
      </uni-forms-item>
      <uni-forms-item label="详细地址" name="address" required>
        <input
          class="edit-form-input"
          v-model="editForm.address"
          placeholder="请输入街道，门牌号"
          placeholder-style="color: #999999"
        />
      </uni-forms-item>
      <uni-forms-item label="设为默认" name="is_default">
        <view class="edit-form-item">
          <switch
            class="edit-form-switch"
            :checked="editForm.is_default === 1"
            color="#ff7900"
            @change="(e) => (editForm.is_default = e.detail.value ? 1 : 0)"
          />
        </view>
      </uni-forms-item>
    </uni-forms>
  </view>

  <view class="edit-del" v-if="editForm.id" @click="delClick">
    <image class="edit-del-icon" src="/package/my/static/address-del.png" />
    删除信息
  </view>

  <view class="edit-fixed">
    <view @click="saveClick">
      <FormButton>保存</FormButton>
    </view>
  </view>

  <EditAreaPicker ref="editAreaPicker" />
  <PopupModal ref="popupModal" />
</template>

<style lang="scss">
page {
  padding-top: 6rpx;
}

.edit-form {
  padding: 0 30rpx;
  margin-bottom: 60rpx;
  background-color: #ffffff;

  .edit-form-input {
    flex-grow: 1;
    height: 72rpx;
    font-size: 28rpx;
    color: #333333;
    line-height: 48rpx;
  }

  .edit-form-item {
    display: flex;
    align-items: center;
  }

  .edit-form-arrow {
    width: 24rpx;
    height: 24rpx;
  }

  .edit-form-switch {
    margin-left: auto;
    transform: scale(0.75);
  }
}

.edit-del {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 200rpx;
  height: 56rpx;
  margin-left: auto;
  margin-right: 30rpx;
  font-size: 28rpx;
  color: #666666;
  line-height: 36rpx;
  border-radius: 29rpx;
  border: 2rpx solid #dddddd;

  .edit-del-icon {
    width: 28rpx;
    height: 28rpx;
    margin-right: 10rpx;
  }
}

.edit-fixed {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  height: 106rpx;
  padding: 14rpx 60rpx env(safe-area-inset-bottom);
  background-color: #ffffff;
}
</style>